<template>
  <el-dialog title="考试选择" :close-on-click-modal="false" append-to-body :visible.sync="visible" @closed="
    () => {
      closed();
      visible = true;
    }" class="jsbos-dialog jsbos-dialog_center" lock-scroll width="1000px" height="800px" min-height="600px">
    <div class="jsbos-common-layout">
      <!-- <div class="jsbos-common-layout-left">
        <el-tree :data="treeData" :props="treeProps" default-expand-all highlight-current ref="treeBox"
          :expand-on-click-node="false" @node-click="handleNodeClick" :default-checked-keys="['-1']"
          class="jsbos-common-el-tree" node-key="id">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <i :class="data.icon"></i>
            <span class="text">{{ node.label }}</span>
          </span>
        </el-tree>
      </div> -->

      <div class="jsbos-common-layout-center" style="background-color: #fff;">
        <el-tabs v-model="tabActiveName" style="margin-left: 20px">
          <el-tab-pane label="考试选取" v-if="!tabOnlyUpload" name="select">
            <el-row class="jsbos-common-search-box" :gutter="16">
              <el-form @submit.native.prevent>
                <el-col :span="8">
                  <el-form-item label="考试名称">
                    <el-input v-model="query.fullName" placeholder="请输入" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="类型">
                    <el-select v-model="query.categoryId" placeholder="请选择" clearable>
                      <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.fullName"
                        :value="item.id" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                    <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
            <div class="jsbos-common-layout-main jsbos-flex-main">
              <el-table v-loading="listLoading" :data="list" @sort-change='sortChange'
                @selection-change="handleSelectionChange" @row-click="selectRow" ref="selectSourceTable" border>

                <el-table-column prop="selection" type="selection" width="50" align="center" />
                <el-table-column prop="fullName" label="考试名称" width="0" align="left">
                </el-table-column>
                <el-table-column prop="creatorUserId" label="创建用户" width="120" align="center" />
                <el-table-column prop="creatorTime" label="创建时间" width="200" align="center" />
              </el-table>
              <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                @pagination="initData" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" v-loading="saveLoading" @click="dataSelectSubmit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
import { getPreviewFileTaskUrl } from "@/api/common";
import { getCategorySelector } from "@/views/exam/api/category";
import { getDictionaryDataList } from '@/api/systemData/dictionary'
export default {
  name: "SelectExam",
  components: {},
  props: {
    tabActiveName: {
      type: String,
      default: "select",
    },
    tabOnlyUpload: {
      type: Boolean,
      default: false,
    },
    closed: Function
  },
  data() {
    return {
      activeFile: {},
      previewVisible: false,
      fileList: [],
      showAll: false,
      visible: true,
      detailVisible: false,
      query: {
        fullName: undefined,
        catalogId: undefined,
        type: undefined,
        enabledMark: undefined,
        examRepeatType:undefined
      },
      treeProps: {
        children: 'children',
        label: 'fullName',
        value: 'id'
      },
      list: [],
      listLoading: true,
      saveLoading: false,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      catalogFormVisible: false,
      formVisible: false,
      exportBoxVisible: false,
      columnList: [
        { prop: 'catalogId', label: '资源目录' },
        { prop: 'name', label: '考试名称' },
        { prop: 'type', label: '类型' },
        { prop: 'size', label: '大小' },
        { prop: 'creatorUserId', label: '创建用户' },
        { prop: 'creatorTime', label: '创建时间' },
        { prop: 'enabledMark', label: '状态' },
      ],
      treeData: [],
      treeActiveId: '-1',
      treeActiveName: '全部',
      catalogIdOptions: [],
      catalogIdProps: {
        "label": "fullName",
        "value": "id",
        "children": "children"
      },
      typeOptions: [
        {
          fullName:'理论考试',
          id:'1'
        },
        {
          fullName:'技能考试',
          id:'2'
        },
        {
          fullName:'自测',
          id:'3'
        },
        {
          fullName:'仅考试',
          id:'4'
        },
      ],
      typeProps: {
        "label": "fullName",
        "value": "id"
      },
      multipleSelection: [],
      taskUrl: "",
    }
  },
  computed: {
    menuId() {
      return this.$route.meta.modelId || ''
    }
  },
  created() {
    this.initData();
    this.getTreeView();
    this.getcatalogIdOptions();
    this.handleTab();
  },
  methods: {
    previewSource(item) {
      this.activeFile = JSON.parse(item.fileJson);
      this.previewVisible = true
    },
    // 表单提交
    dataSelectSubmit() {
      this.visible = false
      this.$emit('selectComplete', this.multipleSelection)
    },
    getcatalogIdOptions() {
      this.$store
        .dispatch("base/getDictionaryData", {
          encode: 'CertificateCategory',
        }).then((res) => {
          this.catalogIdOptions = res;
        });
    },
    goDetail(id) {
      this.detailVisible = true
      this.$nextTick(() => {
        this.$refs.Detail.init(id)
      })
    },
    selectRow(row, column, event) {
      this.$refs.selectSourceTable.toggleRowSelection(row)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleTab() {
      if (!this.taskUrl) {
        getPreviewFileTaskUrl().then((res) => {
          if (res.data) {
            this.taskUrl = res.data;
          } else {
            this.$message.warning("文件不存在");
          }
        });
      }
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
      this.listQuery.sidx = !order ? '' : prop
      this.initData()
    },
    getTreeView() {
      // 获取所属目录
      getCategorySelector({
        folderType: "exam",
        parentId: "-1",
        menuId: "111",
      }).then((res) => {
        let topItem = {
          fullName: "全部",
          hasChildren: true,
          id: "-1",
          children: res.data,
        };
        this.treeData = [topItem]
      });
    },
    getNodePath(node) {
      let fullPath = []
      const loop = (node) => {
        if (node.level) fullPath.unshift(node.data)
        if (node.parent) loop(node.parent)
      }
      loop(node)
      return fullPath
    },
    handleNodeClick(data, node) {
      this.treeActiveId = data.id
      this.treeActiveName = data.name
      for (let
        key in this.query
      ) {
        this.query[key] = undefined
      }
      this.query.catalogId = data.id
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      }
      this.initData()
    },
    initData() {
      this.listLoading = true;
      this.visible = true;
      this.fileList = []
      let _query = {
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId
      };
      request({
        url: `/api/exam/TemsExam/getList`,
        method: 'post',
        data: _query
      }).then(res => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];
          _list.push(_data)
        }
        this.list = _list
        this.total = res.data.pagination.total
        this.listLoading = false
      })
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      }
      this.initData()
    },
    refresh(isrRefresh) {
      this.formVisible = false
      if (isrRefresh) this.reset()
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined
      }
      this.search()
    }
  }
}
</script>
<style lang="scss" scoped>
.jsbos-common-layout-left {
  height: auto;
}

.sourceMain .uploadBox[data-v-1aa79f2a] {
  min-height: 525px;
}

.sourceMain .uploadBox .uploadTopTi[data-v-1aa79f2a] {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  line-height: 32px;
  margin: -3px 0 7px
}

.sourceMain .uploadBox .uploadTopTi .ant-btn[data-v-1aa79f2a] {
  margin-right: -8px
}

.sourceMain .uploadBox .uploadTopDec[data-v-1aa79f2a] {
  background: #fff5eb;
  font-size: 12px;
  padding: 6px 18px;
  width: 690px
}

.sourceMain .uploadBox .uploadTopDec .anticon[data-v-1aa79f2a] {
  margin-right: 6px;
  font-size: 14px;
  vertical-align: -3px
}

.sourceMain .uploadBox .uploadMenu[data-v-1aa79f2a] {
  margin: 14px 0;
  height: 112px;
  width: 710px
}

.sourceMain .uploadBox .uploadMenu .item[data-v-1aa79f2a] {
  float: left;
  height: 112px;
  background: #f5f9fc;
  padding: 24px 24px 0;
  margin-left: 18px;
  width: 336px;
  cursor: pointer
}

.sourceMain .uploadBox .uploadMenu .item .itemIcon[data-v-1aa79f2a] {
  display: inline-block;
  width: 48px;
  height: 59px;
  vertical-align: top
}

.sourceMain .uploadBox .uploadMenu .item .itemIcon i[data-v-1aa79f2a] {
  width: 48px;
  height: 59px;
  display: inline-block
}

.sourceMain .uploadBox .uploadMenu .item .itemIcon i.icon-file[data-v-1aa79f2a] {
  background: url()
}

.sourceMain .uploadBox .uploadMenu .item .itemIcon i.icon-html[data-v-1aa79f2a] {
  background: url()
}

.sourceMain .uploadBox .uploadMenu .item .itemIcon i.icon-scorm[data-v-1aa79f2a] {
  background: url()
}

.sourceMain .uploadBox .uploadMenu .item .itemCont[data-v-1aa79f2a] {
  display: inline-block;
  margin-left: 12px;
  font-size: 12px;
  color: #8c8c8c;
  width: 208px;
  vertical-align: top
}

.sourceMain .uploadBox .uploadMenu .item .itemCont .h2[data-v-1aa79f2a] {
  font-size: 14px;
  color: #262626;
  margin-bottom: 3px
}

.sourceMain .uploadBox .uploadMenu .item[data-v-1aa79f2a]:first-child {
  margin: 0
}

.sourceMain .uploadBox .uploadList[data-v-1aa79f2a] {
  clear: both;
  padding-bottom: 10px
}

.sourceMain .uploadBox .uploadList .item[data-v-1aa79f2a] {
  width: 100%;
  height: 46px;
  line-height: 46px;
  background: #f5f5f5;
  padding: 0 14px;
  margin-top: 10px;
  position: relative
}

.sourceMain .uploadBox .uploadList .item.exist[data-v-1aa79f2a] {
  background-color: #fbe8e8
}

.sourceMain .uploadBox .uploadList .item .icon-video[data-v-1aa79f2a] {
  background: url();
  width: 16px;
  height: 18px;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 10px
}

.sourceMain .uploadBox .uploadList .item .txt[data-v-1aa79f2a] {
  display: inline-block;
  max-width: 300px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: bottom
}

.sourceMain .uploadBox .uploadList .item .num[data-v-1aa79f2a] {
  display: inline-block;
  color: #8c8c8c;
  margin: 0 8px
}

.sourceMain .uploadBox .uploadList .item .jd[data-v-1aa79f2a] {
  width: 95px;
  display: inline-block
}

.sourceMain .uploadBox .uploadList .item .state[data-v-1aa79f2a] {
  position: absolute;
  top: 0;
  right: 15px
}

.sourceMain .uploadBox .uploadList .item .ant-input[data-v-1aa79f2a] {
  min-width: 330px
}
</style>
